<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>海量阅读 - 个人中心</title>

  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Font Awesome图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      font-family: "Microsoft YaHei", Georgia, serif;
      background-color: #f5f3e6; /* 纸张色背景 */
      color: #333;
      line-height: 1.8;
    }

    /* 导航栏样式 */
    .navbar {
      background-color: #79bcff;
    }

    .navbar-brand, .nav-link {
      color: rgb(40, 40, 40) !important;
      /* 加粗 */
      font-weight: bold;
    }

    .nav-link:hover {
      color: #3c8dff !important;
    }

    .footer {
      background-color: hsl(216, 100%, 96%);
      color: #424242;
      padding: 3rem 0;
      margin-top: 3rem;
    }
    /* 个人中心容器 */
    .profile-container {
      margin-top: 30px;
    }

    /* 侧边栏 */
    .profile-sidebar {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      margin-bottom: 30px;
    }

    .profile-header {
      text-align: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
    }

    .avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 auto 15px;
      border: 5px solid #f1f1f1;
    }

    .username {
      font-size: 1.5rem;
      margin-bottom: 5px;
    }

    .user-status {
      color: #666;
      font-size: 0.9rem;
      margin-bottom: 15px;
    }

    .profile-menu {
      list-style: none;
      padding: 0;
      margin-top: 20px;
    }

    .profile-menu li {
      margin-bottom: 5px;
    }

    .profile-menu a {
      display: block;
      padding: 10px 15px;
      color: #333;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.3s;
    }

    .profile-menu a:hover, .profile-menu a.active {
      background-color: #e3f2fd;
      color: #0d6efd;
    }

    .profile-menu i {
      width: 20px;
      margin-right: 10px;
    }

    /* 主内容区 */
    .profile-content {
      background-color: white;
      border-radius: 8px;
      padding: 30px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .content-title {
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }

    /* 阅读统计 */
    .stats-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 40px;
    }

    .stat-card {
      flex: 1;
      min-width: 150px;
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
    }

    .stat-value {
      font-size: 2rem;
      font-weight: bold;
      color: #0d6efd;
      margin-bottom: 5px;
    }

    .stat-label {
      color: #666;
    }

    /* 书架区域 */
    .bookshelf {
      margin-top: 30px;
    }

    .shelf-tabs {
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;
    }

    .shelf-tab {
      display: inline-block;
      padding: 10px 20px;
      text-decoration: none;
      color: #666;
      border-bottom: 3px solid transparent;
    }

    .shelf-tab.active {
      color: #0d6efd;
      border-bottom-color: #0d6efd;
      font-weight: bold;
    }

    .book-item {
      display: flex;
      align-items: center;
      padding: 15px;
      border-radius: 8px;
      background-color: #f8f9fa;
      margin-bottom: 15px;
      transition: all 0.3s;
    }

    .book-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .book-item-img {
      width: 80px;
      height: 120px;
      object-fit: cover;
      margin-right: 20px;
    }

    .book-item-info {
      flex-grow: 1;
    }

    .book-item-title {
      font-weight: bold;
      margin-bottom: 5px;
    }

    .book-item-author {
      color: #666;
      font-size: 0.9rem;
      margin-bottom: 5px;
    }

    .book-item-progress {
      width: 100%;
      height: 8px;
      background-color: #e9ecef;
      border-radius: 4px;
      overflow: hidden;
    }

    .progress-bar {
      height: 100%;
      background-color: #0d6efd;
    }

    .book-item-actions {
      display: flex;
      gap: 10px;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <i class="fas fa-book-reader me-2"></i>海量阅读
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="check.html">搜索筛选</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="login.html">登录注册</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="personal.html">个人中心</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container profile-container">
  <div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-3">
      <div class="profile-sidebar">
        <div class="profile-header">
          <img src="/img/tx.png" class="avatar" alt="用户头像">
          <h3 class="username">牛泥轮</h3>
          <p class="user-status">阅读爱好者 | 已加入 236 天</p>
          <button class="btn btn-primary">
            <i class="fas fa-user-edit me-1"></i>编辑资料
          </button>
        </div>

        <ul class="profile-menu">
          <li>
            <a href="#" class="active">
              <i class="fas fa-home"></i>个人主页
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fas fa-book-reader"></i>我的书架
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fas fa-history"></i>阅读历史
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fas fa-star"></i>我的收藏
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fas fa-comment"></i>我的评论
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fas fa-cog"></i>账号设置
            </a>
          </li>
          <li>
            <a href="#" id="logoutBtn">
              <i class="fas fa-sign-out-alt"></i>退出登录
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="col-md-9">
      <div class="profile-content">
        <h2 class="content-title">
          <i class="fas fa-chart-line me-2"></i>我的阅读统计
        </h2>

        <!-- 阅读统计卡片 -->
        <div class="stats-container">
          <div class="stat-card">
            <div class="stat-value">24</div>
            <div class="stat-label">已读书籍</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">18</div>
            <div class="stat-label">正在阅读</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">126</div>
            <div class="stat-label">阅读小时</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">56</div>
            <div class="stat-label">阅读天数</div>
          </div>
        </div>

        <!-- 我的书架 -->
        <div class="bookshelf">
          <h3 class="content-title">
            <i class="fas fa-book-open me-2"></i>我的书架
          </h3>

          <div class="shelf-tabs">
            <a href="#" class="shelf-tab active">正在阅读</a>
            <a href="#" class="shelf-tab">已读完</a>
            <a href="#" class="shelf-tab">想读</a>
          </div>

          <!-- 书架书籍 -->
          <div class="book-item">
            <img src="/img/zfzdr.jpg" class="book-item-img" alt="追风筝的人">
            <div class="book-item-info">
              <h5 class="book-item-title">追风筝的人</h5>
              <p class="book-item-author">卡勒德·胡赛尼</p>
              <p class="text-muted mb-1">上次读到：第一章 - 25%</p>
              <div class="book-item-progress">
                <div class="progress-bar" style="width: 25%"></div>
              </div>
            </div>
            <div class="book-item-actions">
              <a href="read.html" class="btn btn-primary btn-sm">
                <i class="fas fa-book-reader me-1"></i>继续读
              </a>
              <button class="btn btn-outline-secondary btn-sm" id="removeBook1">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>

          <div class="book-item">
            <img src="/img/jyzhd.jpg" class="book-item-img" alt="解忧杂货店">
            <div class="book-item-info">
              <h5 class="book-item-title">解忧杂货店</h5>
              <p class="book-item-author">东野圭吾</p>
              <p class="text-muted mb-1">上次读到：第三章 - 45%</p>
              <div class="book-item-progress">
                <div class="progress-bar" style="width: 45%"></div>
              </div>
            </div>
            <div class="book-item-actions">
              <a href="read.html" class="btn btn-primary btn-sm">
                <i class="fas fa-book-reader me-1"></i>继续读
              </a>
              <button class="btn btn-outline-secondary btn-sm" id="removeBook2">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>

          <div class="book-item">
            <img src="/img/rljs.jpg" class="book-item-img" alt="人类简史">
            <div class="book-item-info">
              <h5 class="book-item-title">人类简史</h5>
              <p class="book-item-author">尤瓦尔·赫拉利</p>
              <p class="text-muted mb-1">上次读到：第五章 - 15%</p>
              <div class="book-item-progress">
                <div class="progress-bar" style="width: 15%"></div>
              </div>
            </div>
            <div class="book-item-actions">
              <a href="read.html" class="btn btn-primary btn-sm">
                <i class="fas fa-book-reader me-1"></i>继续读
              </a>
              <button class="btn btn-outline-secondary btn-sm" id="removeBook3">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<footer class="footer mt-5">
  <div class="container">
    <div class="row">
      <div class="col-md-4 mb-4">
        <h5 class="text-black mb-4">海量阅读</h5>
        <p>提供海量免费图书资源，让阅读无处不在</p>
      </div>
      <div class="col-md-2 mb-4">
        <h5 class="text-black mb-4">关于我们</h5>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">关于海量</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">加入我们</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">联系方式</a></li>
        </ul>
      </div>
      <div class="col-md-2 mb-4">
        <h5 class="text-black mb-4">帮助中心</h5>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">使用帮助</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">常见问题</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">意见反馈</a></li>
        </ul>
      </div>
      <div class="col-md-4 mb-4">
        <h5 class="text-black mb-4">订阅更新</h5>
        <p class="text-muted">订阅我们的 newsletter，获取最新图书资讯</p>
        <div class="input-group">
          <input type="email" class="form-control" placeholder="您的邮箱">
          <button class="btn btn-primary">订阅</button>
        </div>
      </div>
    </div>
    <hr class="my-4 bg-secondary">
    <div class="row align-items-center">
      <div class="col-md-6 text-center text-md-start">
        <p class="text-muted mb-0">© 2025 海量阅读. 保留所有权利</p>
      </div>
      <div class="col-md-6 text-center text-md-end">
        <div class="d-flex justify-content-md-end justify-content-center gap-3">
          <a href="#" class="text-muted"><i class="bi bi-facebook"></i></a>
          <a href="#" class="text-muted"><i class="bi bi-twitter"></i></a>
          <a href="#" class="text-muted"><i class="bi bi-instagram"></i></a>
          <a href="#" class="text-muted"><i class="bi bi-wechat"></i></a>
        </div>
      </div>
    </div>
  </div>
</footer>

<!-- 引入Bootstrap JS和Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 退出登录按钮
    document.getElementById('logoutBtn').addEventListener('click', function(e) {
      e.preventDefault();
      if (confirm('确定要退出登录吗？')) {
        window.location.href = 'login.html';
      }
    });

    // 移除书籍按钮
    document.getElementById('removeBook1').addEventListener('click', function() {
      if (confirm('确定要从书架中移除《追风筝的人》吗？')) {
        this.closest('.book-item').remove();
      }
    });

    document.getElementById('removeBook2').addEventListener('click', function() {
      if (confirm('确定要从书架中移除《解忧杂货店》吗？')) {
        this.closest('.book-item').remove();
      }
    });

    document.getElementById('removeBook3').addEventListener('click', function() {
      if (confirm('确定要从书架中移除《人类简史》吗？')) {
        this.closest('.book-item').remove();
      }
    });

    // 书架标签切换
    const shelfTabs = document.querySelectorAll('.shelf-tab');
    shelfTabs.forEach(tab => {
      tab.addEventListener('click', function(e) {
        e.preventDefault();

        // 移除所有标签的active类
        shelfTabs.forEach(t => t.classList.remove('active'));

        // 给当前点击的标签添加active类
        this.classList.add('active');

        // 实际项目中这里会切换显示不同状态的书籍
        alert(`已切换到"${this.textContent}"标签`);
      });
    });

    // 个人菜单切换
    const menuItems = document.querySelectorAll('.profile-menu a');
    menuItems.forEach(item => {
      item.addEventListener('click', function(e) {
        if (this.getAttribute('href') === '#') {
          e.preventDefault();

          // 移除所有菜单项的active类
          menuItems.forEach(i => i.classList.remove('active'));

          // 给当前点击的菜单项添加active类
          this.classList.add('active');
        }
      });
    });
  });
</script>
</body>
</html>
